import React, { Component } from 'react';
import Link from 'umi/link';
import styles from './WebsiteList.less';

class WebsiteList extends Component {
  componentDidMount() {
    this.setState({ loading: false });
  }

  render() {
    const websiteList = [
      {
        imgSrc: require('./images/zzw.png'),
        href: 'http://www.cs.com.cn/',
      },
      {
        imgSrc: require('./images/zgzqw.png'),
        href: 'http://www.cnstock.com/',
      },
      {
        imgSrc: require('./images/zgcfw.png'),
        href: 'http://www.cfbond.com/',
      },
      {
        imgSrc: require('./images/zgzjh.png'),
        href: 'http://www.csrc.gov.cn/pub/newsite/',
      },
      {
        imgSrc: require('./images/gzw.png'),
        href: 'http://www.sasac.gov.cn/',
      },
      {
        imgSrc: require('./images/shenjs.png'),
        href: 'http://www.szse.cn/',
      },
      {
        imgSrc: require('./images/hdy.png'),
        href: 'http://irm.cninfo.com.cn/szse/index.html',
      },
      {
        imgSrc: require('./images/zxqyzj.png'),
        href: 'https://www.homeforsmes.com.cn/',
      },
      {
        imgSrc: require('./images/qjw.png'),
        href: 'http://rs.p5w.net/',
      },
      {
        imgSrc: require('./images/ssgsxh.png'),
        href: 'http://www.capco.org.cn/',
      },
      {
        imgSrc: require('./images/zzzs.png'),
        href: 'http://www.csindex.com.cn/',
      },
      {
        imgSrc: require('./images/jczx.png'),
        href: 'http://www.cninfo.com.cn/cninfo-new/index',
      },
    ];

    let generatePicList = () => {
      let res = [];
      for (let i = 0; i < websiteList.length; i++) {
        res.push(
          <Link to={websiteList[i].href} target="_blank" key={'img-' + i}>
            <div className={styles.picContainer}>
              <img src={websiteList[i].imgSrc} className={styles.picContent} />
            </div>
          </Link>
        );
      }
      return res;
    };

    return (
      <div className={styles.outerWidthLim}>
        <div className={styles.breadCrumbContainer}>
          <Link to="/Tools/MarketAnalysis">
            <div className={styles.breadCrumbButton}>融资融券统计与查询</div>
          </Link>
          <Link to="/Tools/EInteraction">
            <div className={styles.breadCrumbButton}>互动易统计</div>
          </Link>
          <Link to="/Tools/WebsiteList">
            <div className={styles.breadCrumbButton + ' ' + styles.breadCrumbButtonActive}>
              常用网站
            </div>
          </Link>
        </div>
        <div className={styles.mainContentContainer}>{generatePicList()}</div>
      </div>
    );
  }
}

export default WebsiteList;
